<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import { mapState } from "vuex";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      chartEntity: null,
      allData: null,
      currPage: 1,
      totalPage: 0,
      timer: null,
    };
  },
  // 计算属性,类似于data概念,有缓存效果,用于不经常修改的数据
  computed: {
    ...mapState(["theme"]),
  },
  // 监控data中的数据变化
  watch: {
    theme(){
      // 销毁当前图表
      this.chartEntity.dispose()
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    }
  },
  // 方法集合
  methods: {
    // 初始化echart
    initChart() {
      this.chartEntity = this.$echarts.init(this.$refs.seller_ref, this.theme);
      const option = {
        title: {
          text: "┃ 商家销售统计",
          top: 20,
          left: 20,
        },
        grid: {
          top: "20%",
          bottom: "5%",
          left: "3%",
          right: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "white",
              },
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#5052ee",
                },
                {
                  offset: 1,
                  color: "#ab6ee5",
                },
              ]),
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#2D3443",
              type: "solid",
            },
          },
        },
      };
      this.chartEntity.setOption(option);
      // 监听鼠标, 停止与开始
      this.chartEntity.on("mouseover", () => clearInterval(this.timer));
      this.chartEntity.on("mouseout", () => this.startInterval());
    },
    // 获得数据
    getData(ret) {
      // const { data: ret } = await this.$http.get("seller");
      // 排序
      // ret.sort((a, b) => b.value - a.value);
      this.allData = ret;
      this.totalPage =
        ret.length % 5 === 0 ? ret.length / 5 : ret.length / 5 + 1;
      // 刷新图表
      this.updateChart();
      // 自动翻页
      this.startInterval();
    },
    // 更新图表
    updateChart() {
      // 分页
      const start = (this.currPage - 1) * 5;
      const end = this.currPage * 5;
      const data = this.allData.slice(start, end);
      // 分离name和value
      const sellerNames = data.map((item) => item.name);
      const sellerValues = data.map((item) => item.value);

      const dataOption = {
        yAxis: {
          data: sellerNames,
        },
        series: [{ data: sellerValues }],
      };
      this.chartEntity.setOption(dataOption);
    },
    startInterval() {
      // 保险操作,若存在定时器则清除定时器重新创建定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        if (this.currPage >= this.totalPage) {
          this.currPage = 1;
        } else {
          this.currPage++;
        }
        this.updateChart();
      }, 3000);
    },
    // 根据屏幕大小调整分辨率
    screenAdapter() {
      const title_font_size = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;

      const adapterOption = {
        title: {
          textStyle: {
            fontSize: title_font_size,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: title_font_size,
            },
          },
        },
        series: {
          barWidth: title_font_size,
        },
        itemStyle: {
          borderRadius: [0, title_font_size / 2, title_font_size / 2, 0],
        },
      };
      this.chartEntity.setOption(adapterOption);
      this.chartEntity.resize();
    },
  },
  beforeCreate() {}, // 生命周期-创建之前
  created() {
    this.$socket.registerCallBack('seller', this.getData);
  }, // 生命周期-创建完成（可以访问当前this实例）
  beforeMount() {}, // 生命周期-挂载之前
  mounted() {
    this.initChart();
    // this.getData();
    this.$socket.send({
      action: "getData",
      socketType: "seller",
      chartName: "seller",
      value: "",
    });

    // 不要在函数中加(), 否则只会调用一次
    window.addEventListener("resize", this.screenAdapter);
    // 加载完成后自动适配分辨率
    this.screenAdapter();
  }, // 生命周期-挂载完成（可以访问DOM元素）
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  beforeUpdate() {}, // 生命周期-更新之前
  updated() {}, // 生命周期-更新之后
  beforeDestroy() {}, // 生命周期-销毁之前
  destroyed() {
    // 销毁定时器
    clearInterval(this.timer);
    // 销毁自适应
    window.removeEventListener("resize", this.screenAdapter);

    this.$socket.unRegisterCallBack('seller')
  }, // 生命周期-销毁完成
};
</script>

<style scoped>
</style>
